<template>
  <view>
    <view v-if="showInfo" class="backShadow" @click.self="closePopup">
      <view class="content" :class="{ 'animated': showInfo && !slideOut, 'slide-out': slideOut }" @click.stop>
        <view class="info_app">
          <view class="main">
            <scroll-view class="container" scroll-y>
            
				
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showInfo: false,
      slideOut: false,
      // 其他数据保持不变
    };
  },
  methods: {
    handlerApply() {
      this.showInfo = true;
      this.slideOut = false;
    },
    closePopup() {
      this.slideOut = true;
      setTimeout(() => {
        this.showInfo = false;
        this.slideOut = false;
      }, 500); // 500ms 是动画的持续时间
    },
    // 其他方法保持不变
  }
};
</script>

<style>
@keyframes slideInFromBottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}

@keyframes slideOutToBottom {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(100%);
  }
}

.animated {
  animation: slideInFromBottom 0.5s ease;
}

.slide-out {
  animation: slideOutToBottom 0.5s ease;
}

.backShadow {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 99;
}

.content {
  background-color: white;
  width: 100%;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 8px 8px 0 0;
}

/* 其他样式保持不变 */
</style>